<layout name="master"/>
<ul class="breadcrumb no-border no-radius b-b b-light pull-in">
    <li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#">商品管理</a></li>
    <li><a href="#">商品编辑</a></li>
</ul>
<!--引入uploadify相关js、css-->
<script src="__ROOT__/node_modules/hdjs/js/jquery.min.js"></script>
<script src="__PUBLIC__/uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" href="__PUBLIC__/uploadify/uploadify.css">
<div class="m-b-md">
    <h3 class="m-b-none">商品编辑</h3>
</div>
<section class="panel panel-default">
    <header class="panel-heading font-bold">商品编辑</header>
    <div class="panel-body">
        <form class="form-horizontal" method="post" action="">
            <div class="form-group">
                <label class="col-sm-2 control-label">所属分类</label>
                <div class="col-sm-10">
                    <select name="cid" class="form-control m-b">
                        <option value="0">请选择</option>
                        <volist name="categoryData" id="vo">


                            <option value="{$vo['cid']}" tid="{$vo.tid}" <if condition="$editData['cid']==$vo['cid']">selected</if>>{$vo['_cname']}</option>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">所属品牌</label>
                <div class="col-sm-10">
                    <select name="bid" class="form-control m-b">
                        <option value="0">请选择</option>
                        <volist name="brandData" id="vo">
                            <option value="{$vo['bid']}" <if condition="$editData['bid']==$vo['bid']">selected</if>>{$vo['bname']}</option>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>

            <div class="form-group">
                <label class="col-sm-2 control-label">商品名称</label>
                <div class="col-sm-10">
                    <input type="text" name="gname" class="form-control" value="<?php echo $editData['gname']?>">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品货号</label>
                <div class="col-sm-10">
                    <input type="text" name="gnumber" class="form-control" value="<?php echo $editData['gnumber']?>">
                    <span class="help-block m-b-none">请输入商品货号...</span>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="input-id-1">单位</label>
                <div class="col-sm-10">
                    <input type="text" name="unit" class="form-control" id="input-id-1" value="<?php echo $editData['unit']?>">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">市场价</label>
                <div class="col-sm-10">
                    <input type="number" name="marketprice" class="form-control" value="<?php echo $editData['marketprice']?>">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商城价</label>
                <div class="col-sm-10">
                    <input type="number"  class="form-control" name="shopprice" placeholder="" value="<?php echo $editData['shopprice']?>">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">点击次数</label>
                <div class="col-sm-10">
                    <input type="text"  class="form-control" name="click" placeholder="" value="<?php echo $editData['click']?>">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">库存</label>
                <div class="col-sm-10">
                    <input type="text"  class="form-control" name="total" placeholder="" value="{$editData.total}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品属性</label>
                <div class="col-sm-10">
                    <table class="table table-hover" id="attr">
                        <volist name="goomdsAttrData" id="vo">
                            <tr>
                                <td>{$vo.taname}</td>
                                <td>
                                    <select name="attr[{$vo.taid}]" class="form-control m-b">
                                        <option value="">请选择</option>
                                        <volist name="vo['tavalue']" id="n">
                                            <option value="{$n}" <if condition="in_array($n,$goods_attr)">selected</if> >{$n}</option>
                                        </volist>
                                    </select>
                                </td>
                            </tr>
                        </volist>
                    </table>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品规格</label>
                <div class="col-sm-10">
                    <table class="table table-hover" id="spec">
                        <volist name="TypeData" id="vo">
                        <tr>
                            <td>{$vo.taname}</td>
                            <td>
                                <select name="spec[{$vo['taid']}][tavalue][]"  class="form-control m-b" id="">
                                    <option value="">请选择</option>
                                    <volist name="vo['tavalue']" id="n">
                                        <option value="{$n}" <if condition="$vo['gtvalue']==$n">selected</if> >{$n}</option>
                                    </volist>
                                </select>

                            </td>

                            <td>附加价格</td>
                            <td>
                                <input type="text" name="spec[{$vo['taid']}][added][]" value="{$vo.added}" class="form-control">
                            </td>
                            <td class="lastTd"><button type="button" class="label bg-danger del-spec">删除</button></td>
                        </tr>
                            <script>
                                $(function () {
                                    $("#spec").find("tr:contains({$vo['taname']})").eq(0).find("td:last").html('<button type="button" class="label bg-info add-spec">添加</button>')
                                })
                            </script>
                        </volist>

                    </table>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>


            <style>
                li{
                    list-style: none;
                }
            </style>
            <div class="form-group">
                <label class="col-sm-2 control-label">列表图</label>
                <div class="col-sm-2">
                    <input type="file" name="file_upload" id="list-pic" />
                    <script>
                        $(function() {
                            $("#list-pic").uploadify({
                                'height'        : 30,
                                'swf'           : '__PUBLIC__/uploadify/uploadify.swf',
                                'uploader'      : "{:u('Admin/Commodity/ajaxUpload')}",
                                'width'         : 120,
                                'buttonText' : '请选择文件',
                                'successTimeout' : 30,
                                'fileSizeLimit' : '2000KB',
                                'uploadLimit' : 10,
                                'removeTimeout' : 0.2,
                                'fileTypeExts' : '*.gif; *.jpg; *.png',
                                'onUploadSuccess' : function(file, data, response) {
                                        var li = '<li path="'+data+'" style="float: right"><img src="__ROOT__/'+data+'" style="width: 80px"/><a href="javascript:;" style="color:red" class="del-img">X</a><input name="pic" hidden value="'+data+'"/></li>';
                                        $('#listPic').append(li);
                                }
                            });
                        });
                    </script>
                </div>
                <!--旧数据中的列表图册-->
                <div class="col-sm-8" id="listPic">
                    <li path="{$editData['pic']}" style="float: right">
                        <img src="__ROOT__/{$editData['pic']}" style="width: 80px">
                        <a href="javascript:;" style="color:red" class="del-img">X</a>
                        <input name="pic" hidden value="{$editData['pic']}"/>
                    </li>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品图册</label>
                <div class="col-sm-2">
                    <input type="file" name="file_upload" id="detail-pic" />
                    <script>
                        $(function() {
                            $("#detail-pic").uploadify({
                                'height'        : 30,
                                'swf'           : '__PUBLIC__/uploadify/uploadify.swf',
                                'uploader'      : "{:u('Admin/Commodity/ajaxUpload')}",
                                'width'         : 120,
                                'buttonText' : '请选择文件',
                                'successTimeout' : 30,
                                'fileSizeLimit' : '2000KB',
                                'uploadLimit' : 10,
                                'removeTimeout' : 0.2,
                                'fileTypeExts' : '*.gif; *.jpg; *.png',
                                'onUploadSuccess' : function(file, data, response) {
//                                    alert(data);
                                    var li = '<li path="'+data+'" style="float: right"><img src="__ROOT__/'+data+'" style="width: 80px"/><a href="javascript:;" style="color:red" class="del-img">X</a><input name="detailPic[]" hidden value="'+data+'"/></li>';
                                    $('#detailPic').append(li);
                                }
                            });
                        });
                    </script>
                </div>
                <!--旧数据中的商品图册-->
                <div class="col-sm-8" id="detailPic">
                    <li path="{$editData['big']}" style="float: right">
                        <img src="__ROOT__/{$editData['big']}" style="width: 80px"/>
                        <a href="javascript:;" style="color:red" class="del-img">X</a>
                        <input name="detailPic[]" hidden value="{$editData['big']}"/>
                    </li>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <!--一如百度编辑js文件-->
            <script src="__PUBLIC__/ueditor1_4_3/ueditor.config.js"></script>
            <script src="__PUBLIC__/ueditor1_4_3/ueditor.all.js"></script>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品详情</label>
                <div class="col-sm-10">
                    <textarea name="intro" id="intro" style="width:700px">{$editData.intro}</textarea>
                    <script>
                        UE.getEditor('intro');
                    </script>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">售后服务</label>
                <div class="col-sm-10">
                    <textarea name="service" id="service" style="width:700px">{$editData.service}</textarea>
                    <script>
                        UE.getEditor('service');
                    </script>
                </div>
            </div>
            <input type="text" hidden name="tid" value="{$editData['tid']}">
            <button class="btn btn-twitter btn-block m-b-sm">提交</button>
        </form>
    </div>
</section>
<script>
    function controller($scope, $, _){
        //异步获取规格和属性
        $("select[name=cid]").change(function(){
            //1.获取选中当前的类型id;:selected选中的
            var tid = $(':selected').attr('tid');
            //判断顶级分类不能添加商品
            if(tid==0){
                alert('顶级分类不能添加商品');
                $(this).val(0);return false;
            }
            //将tid值放入隐藏域
            $("input[name=tid]").val(tid);
            //2.根据tid发送异步获取类型属性数据
            $.post("{:u('Admin/Commodity/ajaxGetAttr')}",{tid:tid},function(res){
                var spec = '';//规格
                var attr = '';//属性
                $.each(res,function(k,v){
                    if(v.class==0){
                        //说明是属性
                        attr += '<tr><td>'+v.taname+'</td><td>';
                        attr += '<select  class="form-control m-b" name="attr['+v.taid+']"><option value="0">请选择</option>';
                        $.each(v.tavalue,function(m,n){
                            attr += '<option value="'+n+'">'+n+'</option>';
                        })
                        attr += '</select></td></tr>';
                    }else{
                        //说明是规格
                        spec += '<tr><td>'+v.taname+'</td><td>';
                        spec += '<select  class="form-control m-b" name="spec['+v.taid+'][tavalue][]"><option value="0">请选择</option>';
                        $.each(v.tavalue,function(m,n){
                            spec += '<option value="'+n+'">'+n+'</option>';
                        })
                        spec += '</select></td><td>附加价格</td><td>';
                        spec += '<input type="text" name="spec['+v.taid+'][added][]" class="form-control"></td>';
                        spec += '<td class="lastTd"><button type="button" class="label bg-info add-spec">添加</button></td></tr>';
                    }
                })
                //在循环完成之后，将其写入带页面中对应的位置
                $('#attr').html(attr);
                $('#spec').html(spec)

            },'json');
        })
        //点击删除上传图片
        $('#detailPic,#listPic').delegate('.del-img','click',function(){
            var path = $(this).parents('li').attr('path');
            var _this = $(this);
            $.post("{:u('Admin/Commodity/ajaxDelImg')}",{path:path},function(res){
                _this.parents('li').remove();
            })
        })
        //点击规格添加按钮添加一项
        $("#spec").delegate('.add-spec','click',function(){
            var tr = $(this).parents('tr').clone();
            $(this).parents('tr').after(tr);
            //将添加按钮修改为删除按钮
            tr.last('td').find('.add-spec').remove();
            var del = '<button type="button" class="label bg-danger del-spec">删除</button>'
            tr.find('.lastTd').append(del);
        })
        //点击删除规格删除一项
        $("#spec").delegate('.del-spec','click',function(){
            $(this).parents('tr').remove();
        })
    }
</script>